<!DOCTYPE html>
<html  xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>图书管理系统-首页</title>
<script type="text/javascript" src="static/jquery-easyui-1.5.5.3/jquery.min.js"></script>
	<link rel="stylesheet" href="static/jquery-easyui-1.5.5.3/themes/material-teal/easyui.css" />
	<link rel="stylesheet" href="static/jquery-easyui-1.5.5.3/themes/icon.css" />
<link rel="stylesheet" href="webjars/bootstrap/3.3.7-1/css/bootstrap.css">
<link rel="stylesheet" href="webjars/bootstrap/3.3.7-1/css/bootstrap-theme.css">
<script type="text/javascript" src="webjars/bootstrap/3.3.7-1/js/bootstrap.js"></script>
<script type="text/javascript" src="static/jquery-easyui-1.5.5.3/jquery.easyui.min.js"></script>
<script type="text/javascript" src="static/jquery-easyui-1.5.5.3/locale/easyui-lang-zh_CN.js"></script>

<style type="text/css">
	*{
		margin: 0px;
		padding: 0px;
	}
	#body{
		height: auto;
	}
	#nav{
		

		
	}
	#body2{
		background: url("static/img/book_9.jpg") no-repeat ;
		background-size:cover;
       	height: auto;
	}
	#page{
		width: 85%;
		height:auto;
		margin: 0px auto;
		background-color: white;
		opacity:0.94;
		border: 1px dashed black;
		border-bottom: 1px solid black;
		
	}
	#body3{
		height: auto;
		border-bottom: 1px solid black;
		background-color: #0C0C0C;
		color: #3B3B3B;
		font-family:"宋体";
	}
	#body4{
		height: auto;
	 	margin: 0px auto;
		width: 100%;
		
	}

</style>
<script type="text/javascript">
	$(function(){
		$('.carousel').carousel({
			  interval: 3000
		});
	
	});
	function jie(){
		$.messager.alert('警告','借书请先登陆！');   
	}
	function only(value){
		$.post('user/only',{username:value},function(data){
			$("#username_error").html(data);			
		});
	}
</script>
</head>
<body>
	<div id="body">
		<div id="nav">
			<nav  class="navbar navbar-default" role="navigation"  style="margin-bottom: 0px;width: auto;">
			   <div class="container-fluid">
				    <div class="navbar-header">
				    	<a  class="navbar-brand"><span class="glyphicon glyphicon-random"></span></a>
				        <a class="navbar-brand" href="#">图书管理系统</a>
				    </div>   
			   <div style="float: right;">
			        <ul class="nav navbar-nav">
			            <li class="active"><a href="#">首页</a></li>
			            <li><a href="#">联系我们</a></li>
			            <li class="dropdown">
			            <a href="#" data-toggle="dropdown">读者注册<span class="caret"></span></a>
			            	 <ul class="dropdown-menu">
			            	 	<li><a href="#" data-toggle="modal" data-target="#teaForm">老师注册</a></li>
			            	 	<li><a href="#" data-toggle="modal" data-target="#stuForm">学生注册</a></li>
			            	 </ul>
			            </li>
			            <li><a href="#" data-toggle="modal" data-target="#myModal">登陆</a></li>
			        </ul>
			    </div>
			   </div>
			</nav>
		</div>
						
		<div id="slidershow" class="carousel slide"  data-ride="carousel">
		<!-- 设置轮播图片的顺序 -->
			<ol class="carousel-indicators">
				<li data-target="#slidershow" data-slide-to="0" class="active"></li>
				<li data-target="#slidershow" data-slide-to="1" ></li>
				<li data-target="#slidershow" data-slide-to="2" ></li>
				<li data-target="#slidershow" data-slide-to="3" ></li>
				<li data-target="#slidershow" data-slide-to="4" ></li>
			</ol>
			<!-- 设置轮播图片 -->
			<div class="carousel-inner">
				<div class="item active">
					<img alt="" src="static/img/book_3.jpg" style="width:100%;height: 520px;">
					<div class="carousel-caption">
						<h3 data-th-if="${param.error}" style="color: white;">用户名或密码错误</h3>
						<h4 th:text="${session.time}"></h4>
					</div>
				</div>
				<div class="item">
					<img alt="" src="static/img/book_4.jpg" style="width:100%;height: 520px;">
					<div class="carousel-caption">
						<h3 data-th-if="${param.error}" style="color: white;">用户名或密码错误</h3>
						<h4 th:text="${session.time}"></h4>
					</div>
				</div>
				<div class="item">
					<img alt="" src="static/img/book_5.jpg" style="width:100%;height: 520px;">
					<div class="carousel-caption">
						<h3 data-th-if="${param.error}" style="color: white;">用户名或密码错误</h3>
						<h4 th:text="${session.time}"></h4>
					</div>
				</div>
				<div class="item">
					<img alt="" src="static/img/book_6.jpg" style="width:100%;height: 520px;">
					<div class="carousel-caption">
						<h3 data-th-if="${param.error}" style="color: white;">用户名或密码错误</h3>
						<h4 th:text="${session.time}"></h4>
					</div>
				</div>
			<div class="item">
					<img alt="" src="static/img/book_7.jpg" style="width:100%;height: 520px;">
					<div class="carousel-caption">
						<h3 data-th-if="${param.error}" style="color: white;">用户名或密码错误</h3>
						<h4 th:text="${session.time}"></h4>
					</div>
				</div>
				
				<!-- 设置轮播控制器 -->
				<a href="#slidershow" data-slide="prev" class="left carousel-control" role="button">
					<span class="glyphicon glyphicon-chevron-left"></span>
				</a> 
				<a href="#slidershow" data-slide="next" class="right carousel-control" role="button">
					<span class="glyphicon glyphicon-chevron-right"></span>
				</a>    
			</div>
		</div>
		<div id="body4">
			<div id="table" style="width: 98%;margin: 0px auto">
				<table style="width: 100%;" >
					<tr th:each="b:${books}" style="float: left;">
					<td style="padding: 56px;width: 170px;" > 
						<img alt="暂时无法查看" th:src="@{/books/download/(id=${b.id})}" width=150px, height=210px  style="float: left;">
						<label>书名:</label><label th:text="${b.title}"></label><br>
						<label>作者：</label><label th:text="${b.suthor}"></label><br>
						<button class="easyui-linkbutton" type="button" onclick="jie()">借书</button>
					</td>
					</tr>
				</table> 
			</div>
		</div>
		<div id="body2">
			<div id="page">
				<div style="margin: 0px auto; width: 85%;">
					<div style="text-align:center; padding: 30px;"><h2>图书管理系统介绍</h2></div>
					<div style="font-size: 20px; font-family: '楷体'">
					<p style="padding: 5px;">&emsp;&emsp;
						图书馆管理系统的工作流程非常简单，首先在电子标签内写入详细的图书资料信息，然后把电子标签粘贴在相应的图书资料上，当需要对图书资料进行借还、查找、盘点等操作时，
						读写器就会读取资料上电子标签的信息并将信息传送到服务器上，从而实现对图书资料的管理。
					</p>
					<p style="padding: 5px;">&emsp;&emsp;
						图书馆提供的物质资源越来越丰富，如何高效准确地对馆藏资料进行整理、借还、盘点成为困扰图书馆管理人员的问题。GAO图书馆管理系统使用先进的RFID技术，为图书馆提供了
						全新盘点模式，降低了管理人员的劳动强度；大幅提高了图书盘点及错架图书整理效率，使错架图书的查找变得更为快捷便利；RFID安全门不会产生误报，安全门摆放距离更加宽阔，
						使读者进出更加自如，有效简化了读者借还书手续，提高了图书借阅率，避免了读者与管理人员之间发生不必要争执，融洽了读者与管理人员之间的关系，该系统得到了广大人士的欢迎。
					</p>
					<div style="margin-top: 20px;">
						<div style="width: 22px;height: 22px;background: green; float: left;"></div><font style="font-size: 22px;">功能模块</font>
						<hr>
							<b style="font-size: 25px;">简介</b><br>
							<p>设计并实现了如下四个子系统，分别是登录子系统，查询子系统，借还子系统，管理子系统。</p>
							<b style="font-size: 25px;">登录子系统</b><br>
							<p>它主要提供用户登录功能，并按各用户的权限使用本系统。本系统分三类用户：公共权限查询，管理员的权限是借还书和管理书还有管理读者，管理图书分类，管理管理员登录帐户，管理逾期图书。</p>
							<b style="font-size: 25px;">查询子系统</b><br>
							<p>主要用于查询图书，其中直接查询包括按图书编号直接查询，按书名查询，按作者查询，按出版社查询(可选模糊查询)，多条件查询。按读者的要求选取所需要的图书直接查询和模糊查询，多条件查询。</p>
							<b style="font-size: 25px;">借阅子系统</b><br>
							<p>主要由图书管理员进行借书还书记录的登记和清除，它分别由二个界面：借书操作界面和还书界面构成。</p>
							<b style="font-size: 25px;">借阅管理子系统</b><br>
							<p>分别是由图书管理员管理图书(包括图书信息的修改，新图书的增加，旧图书的删除)，超级管理员管理图书分类，管理信息，管理管理员登录帐户，管理逾期未还图书。</p>
							<hr>
							
					</div>
					</div>
				</div>
			</div>
		</div>
		<div id="body3">
			<div style="font-size: 20px;padding-top: 25px;text-align: center;">
			<p style="text-align: center;">
	    		<a href="#"><font style="color: #404040;">官方微博</font></a>&emsp;|&emsp;
	    		<a href="#"><font style="color: #404040;">企业微信</font></a>&emsp;|&emsp;
	    		<a href="#"><font style="color: #404040;">隐私政策</font></a>&emsp;|&emsp;
	    		<a href="#"><font style="color: #404040;">企业官网</font></a>&emsp;|&emsp;
	    		<a href="#"><font style="color: #404040;">关于我们</font></a>
	    	</p>
    		<p style="text-align: center;">版权所有：三峡职院</p>
	   		<p style="text-align: center;">Copyright © 2018 MIUI 京ICP备10046444号 | 京公网安备11010802020134号 | 京ICP证110507号 </p>
		</div>
	</div>
	
<!-- 登陆模态框 -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h3 class="modal-title" id="myModalLabel" >登陆</h3>
    </div> 
    
     <form action="login" method="post">
	    <div class="modal-body" style="height: 150px;">
		 <div class="form-group">
			<label for="recipient-name" class="col-sm-2 col-lg-offset-1 control-label" style="margin-top: 8px">账号:</label>
			<div class="col-sm-8"><input type="text" name="username" id="account" class="form-control " placeholder="请输入账号" required ></div>
		</div><br><br>
		 <div class="form-group">
			<label for="recipient-name" class="col-sm-2 col-lg-offset-1 control-label" style="margin-top: 8px">密码:</label>
			<div class="col-sm-8"><input type="password" name="password" id="account" class="form-control" placeholder="请输入密码" required></div>
		</div>	
		
	 </div>
     <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal"><span class="glyphicon glyphicon-remove"></span> 关闭</button>
        <button type="submit" class="btn btn-primary"><span class="glyphicon glyphicon-log-in"></span> 登陆</button>
     </div>
      </form>
    </div>
  </div>
</div>


<!-- 老师注册模态框 -->
<div class="modal fade" id="teaForm" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" > 
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h3 class="modal-title" id="myModalLabel" >老师注册</h3>
      </div>
       <form id="myteaForm" method="post">
	    <div class="modal-body"style="height: auto ; text-align: right;">
		 <div class="form-group">
			<label for="recipient-name" class="col-sm-2 col-lg-offset-1 control-label" style="margin-top: 8px">用户名：</label>
			<div class="col-sm-8"><input type="text" name="username" id="username" class="form-control " placeholder="请输入账号" required th:onchange="'javascript:only(this.value);'"></div>
			<div class="col-sm-12" id="username_error" style="color: red;text-align: center;"></div>
		</div><br><br>
		 <div class="form-group">
			<label for="recipient-name" class="col-sm-2 col-lg-offset-1 control-label" style="margin-top: 8px">默认密码：</label>
			<div class="col-sm-8"><input type="text" name="" id="account" class="form-control " placeholder="默认密码为111，可登陆自行修改"  disabled="disabled" required ></div>
		</div><br><br>
		 <div class="form-group">
			<label for="recipient-name" class="col-sm-2 col-lg-offset-1 control-label" style="margin-top: 8px">真实姓名：</label>
			<div class="col-sm-8"><input type="text" name="name" id="name" class="form-control" placeholder="请输入真实姓名" required></div>
		</div><br><br>
		<div class="form-group">
			<label for="recipient-name" class="col-sm-2 col-lg-offset-1 control-label" style="margin-top: 8px">年龄：</label>
			<div class="col-sm-8"><input type="text" name="age" id="age" class="form-control" placeholder="请输入年龄" required></div>
		</div><br><br>
		<div class="form-group">
			<label for="recipient-name" class="col-sm-2 col-lg-offset-1 control-label" style="margin-top: 8px">性别：</label>
			<div class="col-sm-8">
			<select class="form-control" name="sex" id="sex">
				<option value="男">男</option>
				<option value="女">女</option>
			</select></div>
		</div><br><br>
		<div class="form-group">
			<label for="recipient-name" class="col-sm-2 col-lg-offset-1 control-label" style="margin-top: 8px">联系电话：</label>
			<div class="col-sm-8"><input type="text" name="phone" id="phone" class="form-control" placeholder="请输入联系电话" required></div>
		</div><br><br>
		<div class="form-group">
			<label for="recipient-name" class="col-sm-2 col-lg-offset-1 control-label" style="margin-top: 8px">备注：</label>
			<div class="col-sm-8"><input type="text" name="ranmek" id="ranmek" class="form-control" placeholder="请输入备注"></div>
		</div><br><br>
	 </div>
     <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal"><span class="glyphicon glyphicon-remove"></span> 关闭</button>
        <button type="reset" class="btn btn-success"><span class="glyphicon glyphicon-refresh"></span> 重置</button>
        <button type="button" class="btn btn-primary" onclick="myteacherForm()"><span class="glyphicon glyphicon-file"></span> 立即注册</button>
     </div>
      </form>
   </div>
</div>
</div>

<script type="text/javascript">
	function myteacherForm(){
		$.ajax({
			type:'post',
			url:'user/register',
			data:$('#myteaForm').serialize(),
			success:function(data){
				$("#myteaForm input").val("");
				alert(data);
			},
			error : function() {
                alert("注册失败！");
            }
		});
	}
	function mystudentForm(){
		$.ajax({
			type:'post',
			url:'user/register',
			data:$('#mystuForm').serialize(),
			success:function(data){
				$("#mystuForm input").val("");
				alert(data);
			},
			error : function() {
                alert("注册失败！");
            }
		});
	}

</script>

<!-- 学生注册模态框 -->
<div class="modal fade" id="stuForm" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h3 class="modal-title" id="myModalLabel" >学生注册</h3>
      </div>
       	<form id="mystuForm">
	    <div class="modal-body"style="height: auto ; text-align: right;">
		 <div class="form-group">
			<label for="recipient-name" class="col-sm-2 col-lg-offset-1 control-label" style="margin-top: 8px">用户名：</label>
			<div class="col-sm-8"><input type="text" name="username" id="username" class="form-control " placeholder="请输入账号" required th:onchange="'javascript:only(this.value);'"></div>
			<div class="col-sm-12" id="username_error" style="color: red;text-align: center;"></div>
		</div><br><br>
		 <div class="form-group">
			<label for="recipient-name" class="col-sm-2 col-lg-offset-1 control-label" style="margin-top: 8px">默认密码：</label>
			<div class="col-sm-8"><input type="text" name="" id="account" class="form-control " placeholder="默认密码为111，可登陆自行修改"  disabled="disabled" required ></div>
		</div><br><br>
		 <div class="form-group">
			<label for="recipient-name" class="col-sm-2 col-lg-offset-1 control-label" style="margin-top: 8px">真实姓名：</label>
			<div class="col-sm-8"><input type="text" name="name" id="name" class="form-control" placeholder="请输入真实姓名" required></div>
		</div><br><br>
		<div class="form-group">
			<label for="recipient-name" class="col-sm-2 col-lg-offset-1 control-label" style="margin-top: 8px">年龄：</label>
			<div class="col-sm-8"><input type="text" name="age" id="age" class="form-control" placeholder="请输入年龄" required></div>
		</div><br><br>
		<div class="form-group">
			<label for="recipient-name" class="col-sm-2 col-lg-offset-1 control-label" style="margin-top: 8px" >性别：</label>
			<div class="col-sm-8">
			<select class="form-control" name="sex" id="sex">
				<option value="男">男</option>
				<option value="女">女</option>
			</select></div>
		</div><br><br>
		
		<div class="form-group">
			<label for="recipient-name" class="col-sm-2 col-lg-offset-1 control-label" style="margin-top: 8px">选择班级：</label>
			<div class="col-sm-8">
			<select class="form-control" name="bj_id" >
				<option th:each="bj:${bjs}" th:value="${bj.id}" th:text="${bj.bjName}"></option>
			</select></div>
		</div><br><br>
		
		<div class="form-group">
			<label for="recipient-name" class="col-sm-2 col-lg-offset-1 control-label" style="margin-top: 8px">联系电话:</label>
			<div class="col-sm-8"><input type="text" name="phone" id="phone" class="form-control" placeholder="请输入联系电话" required></div>
		</div><br><br>
		<div class="form-group">
			<label for="recipient-name" class="col-sm-2 col-lg-offset-1 control-label" style="margin-top: 8px">备注:</label>
			<div class="col-sm-8"><input type="text" name="ranmek" id="ranmek" class="form-control" placeholder="请输入备注" ></div>
		</div><br><br>
	 </div>
     <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal"><span class="glyphicon glyphicon-remove"></span> 关闭</button>
        <button type="reset" class="btn btn-success"><span class="glyphicon glyphicon-refresh"></span> 重置</button>
        <button type="button" class="btn btn-primary" onclick="mystudentForm()"><span class="glyphicon glyphicon-file"></span> 立即注册</button>
     </div>
     </form>
   </div>
</div>
</div>

</div>
</body>
</html>